<template>
 <div class="app">
  <div class='tinymce'>
    <div class="main">
    <el-input class="title" v-model="title" placeholder="输入文章标题" maxlength="100" show-word-limit></el-input>

    <mavon-editor style="min-height: 700px;max-height: 700px; " v-model="context" ref="md" @imgAdd='editorUpdataImgs'  @save="saveDoc" @change="updateDoc"/>



    <div class="type">
    <p>文章分类:</p>
    <el-select v-model="pagetype" placeholder="类别" style="float:left;width:145px">
            <el-option label="Python" value="Python"></el-option>
            <el-option label="Java" value="Java"></el-option>
            <el-option label="前端" value="前端"></el-option>
            <el-option label="后端" value="后端"></el-option>
            <el-option label="运维" value="运维"></el-option>
            <el-option label="人工智能" value="人工智能"></el-option>
            <el-option label="安全" value="安全"></el-option>
            <el-option label="其他" value="其他"></el-option>
            </el-select>
    </div>
    <div class="comment">
    <el-switch
      v-model="enable_comment"
      active-text="允许评论"
      inactive-text="不允许评论"
      active-value="0"
      inactive-value="1"
      >
    </el-switch>
    </div>
    </div>
    <div class="fabu">
        <el-button type="primary" @click="dialogSend = true">
            发布博客
        </el-button>
    </div>
    <div class="caogao">
        <el-button type="primary" @click="dialogSave = true">
             存为草稿
        </el-button>
      <el-dialog
        title="提示"
        :visible.sync="dialogSend"
        width="20%"
        >
        <span>确定发布?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogSend = false">取 消</el-button>
          <el-button type="primary" @click="send">确 定</el-button>
        </span>
        </el-dialog>

        <el-dialog
        title="提示"
        :visible.sync="dialogSave"
        width="20%"
        >
        <span>确定存稿?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogSave = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
        </el-dialog>
    </div>
  </div>
 </div>
</template>


<script>
import {apiurl} from "../../service/api.js";


export default {
  name: 'markdown',
  data () {
    return {
      dialogSend : false,
      dialogSave : false,

      title: '',       //标题内容
      // preface: '',     //博客前言内容
      pagetype:'',    //文章类别
      status: '',     //是否定位草稿
      enable_comment : '0',
      //markdown配置
      context: ' ',//输入的数据
      toolbars: {
              bold: true, // 粗体
              italic: true, // 斜体
              header: true, // 标题
              underline: true, // 下划线
              mark: true, // 标记
              superscript: true, // 上角标
              quote: true, // 引用
              ol: true, // 有序列表
              link: true, // 链接
              imagelink: true, // 图片链接
              help: true, // 帮助
              code: true, // code
              subfield: true, // 是否需要分栏
              fullscreen: true, // 全屏编辑
              readmodel: true, // 沉浸式阅读
              /* 1.3.5 */
              undo: true, // 上一步
              trash: true, // 清空
              save: true, // 保存（触发events中的save事件）
              /* 1.4.2 */
              navigation: true, // 导航目录
              scrollStyle : true
            },
      markdowncontext : '',   //生成的markdown
      htmlcontext : '',  //生成的html
    }
  },methods:{
  updateDoc(markdown, html) {
    // 此时会自动将 markdown 和 html 传递到这个方法中
    // console.log("markdown内容: " + markdown);
    // console.log("html内容:" + html);
  },
    saveDoc(markdown, html) {
    // 此时会自动将 markdown 和 html 传递到这个方法中
    // console.log("markdown内容:" + markdown);
    // console.log("html内容:" + html);
    this.markdowncontext = markdown
    this.htmlcontext = html
  },
  send(){
    //触发事件,保存markdown
    document.querySelector("body > div.app > div.app > div > div.main > div.v-note-wrapper.markdown-body.shadow > div.v-note-op > div.v-left-item.transition > button.op-icon.fa.fa-mavon-floppy-o").click()

    var that = this
      that.status = 1
      var edittype = "markdown"
      var req = {
        blog_title : that.title,
        blog_content : that.markdowncontext,
        // blog_preface : that.preface,
        blog_status : parseInt(that.status),
        enable_comment : parseInt(that.enable_comment),
        category_id : that.pagetype,
        edit_type : edittype
      }
       if (that.pagetype ==''){
        that.$message.error(`请选择文章类别`)
      }else{
        that.$axios.post({
        url: apiurl.editBlog,
        data:req
      }).then(res=>{
        if(res.data.code==200){
          alert("编辑成功")
          window.opener=null;
          window.close()
        }else{
          alert("编辑失败")
        }
      })
      }
  },
  save(){
    //触发事件,保存markdown
    document.querySelector("#app > div.tinymce > div.main > div.v-note-wrapper.markdown-body.shadow > div.v-note-op > div.v-left-item.transition > button.op-icon.fa.fa-mavon-floppy-o").click()

    var that = this
      that.status = 0
      var edittype = "markdown"
      var req = {
        blog_title : that.title,
        blog_content : that.markdowncontext,
        // blog_preface : that.preface,
        blog_status : parseInt(that.status),
        enable_comment : parseInt(that.enable_comment),
        category_id : that.pagetype,
        edit_type : edittype
      }
      if (that.pagetype ==''){
        that.$message.error(`请选择文章类别`)
      }else{
           that.$axios.post({
        url: apiurl.editBlog,
        data:req
      }).then(res=>{
        if(res.data.code==200){
          alert("编辑成功")
          window.opener=null;
          window.close()
        }else{
          alert("编辑失败")
        }
      })
      }
  },
  editorUpdataImgs(filename,file){
    const $vm = this.$refs.md
//上传图片
    var formData = new FormData();
    formData.append('imgFile', file,file.name);
    let config = {
        headers:{'Content-Type':'multipart/form-data'},
        emulateJSON:true
    };
    this.$axios.post({
      url : apiurl.markdownUpload,
      data : formData,
      headers: {'Content-Type':'multipart/form-data'}
<<<<<<< HEAD
    }).then(function(res){   
        if (res.data.code==200) {    
        $vm.$img2Url(filename, res.data.url)//更改图片内文章上传地址    
=======
    }).then(function(res){
        if (res.data.code==200) {
        alert(filename)
        $vm.$img2Url(filename, res.data.url)//更改图片内文章上传地址
        alert(filename)
        }else{
            alert("Test")
>>>>>>> origin/master
        }
    },function(response){
        this.$message.error('抱歉!图片上传失败!请来联系管理员');
    });
}

  }
}
</script>

<style scoped>
    .tinymce{
        position: absolute;
        top : 100px;
        height: 1000px;
        width: 900px;
        left: 25%;
        box-shadow: 10px 10px 5px #888;
        border:1px solid #666;
    }
    /* #tinymce{
        position: absolute;
    } */
    .main{
        position: absolute;
        top:50px;
        height: 700px;
        width: 800px;
        left: 5%;
    }
    .title{
        width: 800px;
        padding-bottom: 10px;
    }
    .preface{
        padding-bottom: 10px;
    }
    .fabu{
        position: absolute;
        top:920px;
        left: 45px;
    }
    .caogao{
        position: absolute;
        top:920px;
        left: 210px;
    }
    .comment{
      float: right;
    }
</style>
